<template>
  <ListOfTable :columns="columns" :request="request" rowKey="key" />

  <!-- <Card statusType="bar" style="margin-top: 32px">
    <template #title>按钮列表示例</template>
    <ButtonList :buttons="actionButtons" :data="{}" />
    <ButtonList :buttons="buttons" :data="{}" style="margin-top: 16px" />
  </Card> -->

  <Form group type="create" :model="formValue" :columns="columns" :column="2" gap="16px" label-width="auto">
    <Card statusType="bar" style="margin-top: 32px">
      <template #title>默认分组</template>
      <FormGroup index="default" />
    </Card>
    <Card statusType="bar">
      <template #title>扩展分组</template>
      <FormGroup index="extra" />
    </Card>
  </Form>
</template>

<script setup>
import { ref } from 'vue';
import { ListOfTable, Card, Form, FormGroup, ButtonList } from '@wowon/components';
import { query } from '@/services/demo';
import columns, { actionButtons, buttons } from './columns';

const request = ref({
  query,
  // successCode: '0'
});

const formValue = ref({ ...columns.reduce((s, i) => ((s[i.dataIndex] = null), s), {}) });
</script>
